<template>
    <div class="payment-container">
        <h2 class="payment-title">订单支付</h2>
        
        <!-- 商品列表 -->
        <div class="product-list">
            <div class="product-header">
                <span class="header-item">商品信息</span>
                <span class="header-item">单价</span>
                <span class="header-item">数量</span>
                <span class="header-item">小计</span>
            </div>
            
            <div class="product-item" v-for="item in paymentInfo.products" :key="item.productId">
                <div class="item-info">
                    <img :src="item.imageUrl" :alt="item.name" class="item-image" />
                    <span class="item-name">{{ item.name }}</span>
                </div>
                <span class="item-price">¥{{ item.price.toFixed(2) }}</span>
                <span class="item-quantity">{{ item.quantity }}</span>
                <span class="item-subtotal">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
            </div>
        </div>
        
        <!-- 收货信息 -->
        <div class="section">
            <div class="section-header">
                <h3>收货信息</h3>
            </div>
            <div class="address-info">
                <p><strong>收货人：</strong>{{ paymentInfo.name }}</p>
                <p><strong>联系电话：</strong>{{ paymentInfo.phone }}</p>
                <p><strong>收货地址：</strong>{{ paymentInfo.address }}</p>
            </div>
        </div>
        
        <!-- 支付信息 -->
        <div class="payment-info">
            <div class="price-summary">
                <span class="total-price">总计：¥{{ paymentInfo.payAmount?.toFixed(2) }}</span>
                <div v-if="!isViewMode" class="actions">
                    <el-button @click="cancelPayment">取消订单</el-button>
                    <el-button type="primary" @click="handlePayment" :loading="loading">去支付</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import payApi, { PaymentResponse } from '@/api/pay'

const route = useRoute()
const router = useRouter()
const loading = ref(false)

// 判断是否为查看模式
const isViewMode = ref(false)

const paymentInfo = ref<PaymentResponse>({
    orderNo: '',
    name: '',
    phone: '',
    address: '',
    remark: '',
    totalAmount: 0,
    discountAmount: 0,
    payAmount: 0,
    paymentMethod: 1,
    payStatus: 0,
    payTime: '',
    products: []
})

// 从路由参数获取订单编号
onMounted(() => {
    const orderNo = route.query.orderNo?.toString()
    // 检查是否有show参数，如果有则隐藏操作按钮
    isViewMode.value = route.query.show === 'true'
    
    if (orderNo) {
        loadPaymentInfo(orderNo)
    } else {
        ElMessage.error('缺少订单编号')
        router.push('/shoppingcart')
    }
})

// 加载支付信息
const loadPaymentInfo = async (orderNo: string) => {
    try {
        const res = await payApi.queryPayment(orderNo)
        paymentInfo.value = res.data.data
    } catch (error) {
        console.error('获取支付信息失败:', error)
        ElMessage.error('获取支付信息失败')
        router.push('/shoppingcart')
    }
}

// 处理支付
const handlePayment = async () => {
    if (!paymentInfo.value.orderNo) {
        ElMessage.warning('没有可支付的订单')
        return
    }
    
    loading.value = true
    try {
        // 发起支付请求，获取支付表单
        const res = await payApi.pay(paymentInfo.value.orderNo)
        const paymentForm = res.data.data
        console.log(paymentForm)
        
        // 创建一个隐藏的div来渲染支付表单
        const formContainer = document.createElement('div')
        formContainer.innerHTML = paymentForm
        formContainer.style.display = 'none'
        document.body.appendChild(formContainer)
        
        // 提交表单
        const form = formContainer.querySelector('form')
        if (form) {
            form.submit()
        } else {
            ElMessage.error('支付表单格式错误')
        }
    } catch (error) {
        console.error('支付失败:', error)
        ElMessage.error('支付失败')
    } finally {
        loading.value = false
    }
}
// 取消支付
const cancelPayment = () => {
    router.push('/')
}
</script>

<style scoped>
.payment-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.payment-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.section {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.section-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
}

.product-list {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-header {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

.header-item {
    flex: 1;
    text-align: center;
}

.product-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.item-info {
    flex: 1;
    display: flex;
    align-items: center;
}

.item-image {
    width: 80px;
    height: 80px;
    margin-right: 15px;
    object-fit: cover;
}

.item-name {
    flex: 1;
}

.item-price,
.item-quantity,
.item-subtotal {
    flex: 1;
    text-align: center;
}

.item-price,
.item-subtotal {
    color: #f56c6c;
    font-weight: bold;
}

.address-info p {
    margin: 10px 0;
    color: #666;
}

.payment-info {
    padding: 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.price-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-price {
    font-size: 18px;
    color: #f56c6c;
    font-weight: bold;
}

.actions {
    display: flex;
    gap: 15px;
}
</style>